<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="tableBar">
        
        <div class="serch">
          <label style="margin-right: 5px">商品名称：</label>
          <el-input
          v-model="input"
          placeholder="请输入商品名称"
          style="width: 20%;margin-right: 5px"
          clearable
          @clear="init"
          @keyup.enter.native="init()"
        />
        <el-button class="normal-btn continue" style="margin-right: 5px;height:40px" @click="init()"
          >查询</el-button
        >

        <label style="margin-right: 5px">商品类型：</label>
        <el-select v-model="categoryId" slot="type" placeholder="请选择" style="margin-right: 10px">
          <el-option :label="type.name" :value="type.id" v-for="type in types" :key="type.id"/>
        </el-select>

        <label style="margin-right: 5px">商品状态：</label>
        <el-select v-model="status" slot="status" placeholder="请选择">
          <el-option label="禁用" :value="0"></el-option>
          <el-option label="启用" :value="1"></el-option>
          <el-option label="无" value=""></el-option>
        </el-select>
        </div>

        
        
        <el-button
          type="primary"
          class="add"
          @click="addEmployeeHandle('add')"
        >
          + 添加商品
        </el-button>
      </div>
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        :data="tableData"
        stripe
        v-if="tableData.length"
        class="tableBox"
        style="line-height: 40px;"
      >
        <el-table-column prop="name" label="名称"  show-overflow-tooltip/>
        <el-table-column prop="image" label="商品图片"  width="120" >
          <template slot-scope="scope">
            <img :src="scope.row.image" :alt="scope.row.name" style="height: 40px;"  v-image-preview>
            <!-- {{ users.find(scope.row.userId) }} -->
            <!-- {{ String(scope.row.roleId) === '3' ? '店主' : '员工' }} -->
          </template>
          <!-- <img :src="image" :alt="name"> -->
        </el-table-column>
        <el-table-column label="类型"  width="120" >
          <template slot-scope="scope">
              {{ getType(scope.row.categoryId) }}
          </template>
        </el-table-column>
        <!-- <el-tooltip class="item" effect="dark" content="description" placement="bottom"> -->
          <el-table-column prop="description" label="描述"  width="260px" :show-overflow-tooltip="true"/>
        <!-- </el-tooltip> -->
        <el-table-column prop="price" label="价格"  width="100">
          <template slot-scope="scope">
              {{ scope.row.price }}  ￥
          </template>
        </el-table-column>
        <el-table-column prop="expirationDate" label="保质期/天"  width="80">
          <template slot-scope="scope">
              {{ scope.row.expirationDate }}  
          </template></el-table-column>
        <el-table-column label="状态" width="80">
          <template slot-scope="scope" >
            <div
              class="tableColumn-status"
              :class="{ 'stop-use': String(scope.row.status) === '0' }"
            >
              {{ String(scope.row.status) === '0' ? '禁用' : '启用' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="最后操作时间" />
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              class="blueBug"
              :class="{ 'disabled-text': scope.row.username === 'admin' }"
              :disabled="scope.row.username === 'admin'"
              @click="addEmployeeHandle('update',scope.row.id)"
            >
              修改
            </el-button>
            <el-button
              :disabled="scope.row.username === 'admin'"
              type="text"
              size="small"
              class="non"
              :class="{
                'disabled-text': scope.row.username === 'admin',
                blueBug: scope.row.status == '0',
                delBut: scope.row.status != '0',
              }"
              @click="statusHandle(scope.row)"
            >
              {{ scope.row.status == '1' ? '禁用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Empty v-else :is-search="isSearch" />
      <el-pagination
        class="pageList"
        :page-sizes="[10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {productPage,ProductStatus} from '@/api/product'
import {categoryPage} from '@/api/category'
import Empty from '@/components/Empty/index.vue'

export default {
  components:{
    Empty
  },
  data() {
    return {
      loading: true,
      tableData:[],
      types:[],
      type:'',
      page:1,
      pageSize:10,
      input:'',
      isSearch:false,
      id:'',
      status:'',
      counts:0,
      initFun:'',
      categoryId:'',
    }
  },
  created(){
    this.init()
    categoryPage(null,1,99,null).then((res)=>{
      this.types = res.data.records
      let type = {name:'无',id:''}
      this.types.push(type)
    })
    setTimeout(() => {
          this.loading = false;
        }, 1000); 
  },
  methods:{
    init(){
      // console.log(this.categoryId,this.status)
      const res = productPage(this.categoryId,this.input,this.page,this.pageSize,this.status);
      res.then((res)=>{
        // console.log(res.data)
        this.tableData = res.data.records
        this.counts = res.data.total
      }).catch((err)=>{
        console.log(err)
      })
    },

    addEmployeeHandle(methos,id){
      this.$router.push({
        path:'/home/addProduct',
        query:{
          methods:methos,
          id:id
        }
      })
    },
   handleSizeChange(val) {
    this.pageSize = val
    this.init()
  },

   handleCurrentChange(val) {
    this.page = val
    this.init()
  },
  getType(id){
    // console.log(this.types) 
    return this.types.find(type=>type.id === id).name
  },
  statusHandle(value){
    // console.log(value.status)
    const msg = value.status == 0 ? '启用':'禁用'
    this.$confirm('是否'+msg+'该商品？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          value.status = value.status == 0? 1: 0
          console.log(value.status+','+value.id)
          const res = ProductStatus(value.status,value.id)
          res.then((res)=>{
            console.log(res)
            value.status = value.status == 0? 1: 0
              this.$message({
              type: 'success',
              message: msg+'成功!'
            });
          }).catch((err)=>{
            this.$message.error(err)
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
  }
  }
}
</script>

<style  scoped>
.disabled-text {
  color: #bac0cd !important;
}
.tableBar{
  line-height: 40px;
  height: 70px;
  display: flex;
  justify-content: space-between;
}

.tableBox{
  height: 775px;
  border-radius: 5px;
  
}
.add{
  height: 40px;
  margin-right: 15px;
}

.pageList{
  line-height: 40px;
  margin-top: 15px;
}

.container{
  height: 88vh;
  
}

.serch{
  display: flex;
  height:  70px;
  justify-content: space-around;
}
</style>